<template>
	<view style="padding: 12px;">
		<!-- //轮播图片 -->
		<uni-swiper-dot :info="info" field="content"><!-- :current="current" :mode="mode"-->
			<swiper @change="change">
				<swiper-item v-for="(item, index) in info" :key="item.id">
					<view>
						<image :src="item.urlpath" style="width:59vh;height:150px;border-radius:8px;"></image>
					</view>
				</swiper-item>
			</swiper>
		</uni-swiper-dot>
		<!-- 人物信息 -->
		<view class="container">
			<view class="headers">
				<!-- <view class="header">
					<image style="width:50px;height: 50px;border-radius: 10px;" :src="infoList[0].imgpath"></image>
					<text style="font-weight: bold; margin-top: -10%;" class="name">{{infoList[0].name}}</text>
					<p v-if="infoList[0].cls == 2" class="gold">金牌</p>
					<p v-if="infoList[0].cls == 1" class="silver">银牌</p>
					<uni-rate style="margin-top: 70rpx; margin-left: -190rpx;" :readonly="true" max="6"
						:value="infoList[0].star" />
					<text style="color: red;" class="price">¥{{infoList[0].price}} / 每次</text>
				</view> -->
				<div class="medals" style="width: 100%;">
					<div style="float:left;height: 45px;">
						<image :src="infoList[0].imgpath" class="staff-image"></image>
					</div>
					<div style="margin-left: 55px;">
						<div class="active-a">
							<div class="active-b">
								<div class="username">{{infoList[0].name}}</div>
								<div v-if="infoList[0].cls == 2" class="gold">金牌</div>
								<div v-if="infoList[0].cls == 1" class="silver">银牌</div>
							</div>
							<div class="active-c">
								<div class="price">￥{{infoList[0].price}}</div>
							</div>
						</div>
						<uni-rate :readonly="true" size="17" max="6" :value="infoList[0].star" />
					</div>
				</div>
				<view class="info">
					<view class="info-item">
						<text>学历：</text>
						<text>{{infoList[0].education}}</text>
					</view>
					<view class="info-item">
						<text>属相：</text>
						<text>{{infoList[0].birth}}</text>
					</view>
					<view class="info-item">
						<text>民族：</text>
						<text>{{infoList[0].nation}}</text>
					</view>
					<view class="info-item">
						<text>年龄：</text>
						<text>{{infoList[0].age}}</text>
					</view>
					<view class="info-item">
						<text>经验：</text>
						<text>{{infoList[0].suffer}}年</text>
					</view>
					<view class="info-item">
						<text>籍贯：</text>
						<text>{{infoList[0].natv}}</text>
					</view>
				</view>
			</view>
			<!-- 证书 -->
			<view class="documents">
				<view class="containers">
					<image class="image" src="/static/table/yy.png"></image>
					<text class="text">证书证件</text>
				</view>
				<view style="margin: 10PX;" class="document-list">
					<view v-if="infoList[0].tone == 1" class="document-item"
						:class="{'last-item': (index + 1) % 3 === 0}">
						<image class="imagezz" src="/static/jk/bdhg.png"></image>
					</view>
					<view v-if="infoList[0].health == 1" class="document-item"
						:class="{'last-item': (index + 1) % 3 === 0}">
						<image class="imagezz" src="/static/jk/tjbg.png"></image>
					</view>
					<view v-if="infoList[0].practise == 1" class="document-item"
						:class="{'last-item': (index + 1) % 3 === 0}">
						<image class="imagezz" src="/static/jk/zyzs.png"></image>
					</view>
					<view v-if="infoList[0].bail == 1" class="document-item"
						:class="{'last-item': (index + 1) % 3 === 0}">
						<image class="imagebzjjn" src="/static/jk/bzjyjn.png"></image>
					</view>
					<view v-if="infoList[0].maritime == 1" class="document-item"
						:class="{'last-item': (index + 1) % 3 === 0}">
						<image class="imagezz" src="/static/jk/jkz.png"></image>
					</view>
					<view v-if="infoList[0].card == 1" class="document-item"
						:class="{'last-item': (index + 1) % 3 === 0}">
						<image class="imagezz" src="/static/jk/sfz.png"></image>
					</view>
				</view>
			</view>

			<!-- 评价 -->
			<view class="evaluation" style="margin-bottom: 100px;">
				<view class="title">综合评价</view>
				<view class="item">{{infoList[0].introduce}}</view>
			</view>
			<view class="footer_view">
				<div class="footer_div" :class="{'isActivities': isActivities === false}" @click="addToFavorites">
					{{ isActivities ? '☆' : '★' }}
				</div>
			</view>

			<view class="book-button-view">
				<view class="book-button-vieww">
					<button @click="tpsub(infoList[0].id)" class="book-button">马上预约</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import {
		getbyid,
		geturlpath,
		addActivities,
		getisActivities,
		delActivities
	} from '@/request/api.js'
	import {
		onLoad,
		onShow
	}
	from '@dcloudio/uni-app';

	const infoList = ref([]);

	const info = ref([]); //轮播
	let id; // 定义一个变量来存储id
	const token = ref('');
	const isActivities = ref(true);
	const u = ref(null);

	const getToken = () => { // 获取本地存储的token
		const storedToken = uni.getStorageSync('token');
		token.value = storedToken; // 更新响应式变量
	};
	onLoad(async (e) => { // 将onLoad回调函数声明为async
		// console.log("e", e);
		id = e.id; // 获取id并赋值
		getToken();
		try {
			const data = {
				'id': id
			};
			const response = await getbyid(data); // 现在可以在这里使用await
			infoList.value = [response.data.data];
			// console.log(infoList.value);
			const pathData = {
				'id': response.data.data.id
			};
			const req = await geturlpath(pathData);
			info.value = req.data.data;

			if (token.value) {
				let i = 0;
				addActivitiesForFirstNotice(i);
				u.value.status = 1;
				console.log(u.value);
				getisActivities(u.value).then((res) => { //默认显示是否收藏
					if (res.data.code === 200) {
						console.log('已收藏');
						isActivities.value = false;
					} else {
						console.log('未收藏');
						isActivities.value = true;
					}
				});
			} else {
				console.log("未登录");
			}
		} catch (error) {
			console.error("请求失败:", error);
		}
	});

	const addActivitiesForFirstNotice = (i) => {
		u.value = {
			'uid': token.value,
			'jzidorid': id,
			'type': '家政预约',
			'title': infoList.value[0].name,
			'status': i
		};
		console.log(u.value);
		addActivities(u.value).then((res) => {
			console.log(res);
			if (res.data.code === 200) {
				console.log('添加成功');
			} else {
				console.log('已存在并修改');
			}
		});
	};

	const addToFavorites = () => { // 加入收藏的逻辑
		let i = 1;
		if (token.value) {
			if (isActivities.value === true) { //加入收藏
				console.log('加入收藏');
				addActivitiesForFirstNotice(i);
				isActivities.value = false;
			} else {
				console.log('取消收藏');
				u.value.status = i;
				console.log(u.value);
				delActivities(u.value).then((res) => { //取消收藏
					if (res.data.code === 200) {
						console.log('删除成功');
						isActivities.value = true;
					} else {
						console.log('删除失败');
						isActivities.value = false;
					}
				});
			}
		} else {
			console.log("未登录");
		}
	};

	function tpsub(id) { // 跳转预约
		console.log("xxx", id);
		uni.navigateTo({
			url: `/pages/admin/homemaking/details/subscribe?id=${id}`
		});
	}
</script>

<style>
	.footer_view {
		position: fixed;
		bottom: 10%;
		left: 5px;
		width: 35px;
		height: 35px;
	}

	.footer_div {
		width: 100%;
		height: 100%;
		font-size: 29px;
		border-radius: 50%;
		color: white;
		display: flex;
		justify-content: center;
		align-items: center;
		background: linear-gradient(to right, #cccccca3, #cccccca3);
	}

	.footer_div.isActivities {
		color: yellow;
	}

	.active-a {
		align-items: center;
		justify-content: space-between;
		display: flex;
	}

	.active-b,
	.active-c {
		display: flex;
		align-items: center;
	}

	.staff-image {
		width: 50px;
		height: 50px;
		border-radius: 10px;
		margin-right: 10px;
	}

	.username {
		font-size: 19px;
		margin-top: 2px;
		display: inline-block;
		font-weight: bold;
		margin-bottom: 4px;
		margin-right: 20px;
	}

	.price {
		color: red;
		font-size: 14px;
		/* float: right; */
		margin-right: 2px;
		margin-top: 3px;
	}

	.title {
		font-size: 17px;
		font-weight: bold;
		color: #333;
		margin-bottom: 15px;
		/* 增加标题与第一个评价项之间的间距 */
	}

	.item {
		font-size: 13px;
		color: #666;
	}

	.document-list {
		display: flex;
		flex-wrap: wrap;
		/* 允许子元素换行 */
		justify-content: space-between;
		/* 子元素在主轴上平均分布 */
	}

	.document-item {
		width: calc(33.333% - 0px);
		/* 每个项目占据三分之一行宽减去间距 */
		/* padding-bottom: 15px; */
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.imagezz {
		width: 50px;
		margin-bottom: 10px;
		/* 图片宽度自适应容器宽度 */
		height: 50px;
		/* 图片高度按比例缩放 */
	}

	.imagebzjjn {
		width: 70px;
		margin-bottom: 10px;
		height: 50px;
	}

	/* 如果是每行的最后一个项目，可以添加额外的样式 */
	.last-item {
		margin-right: -10px;
		/* 移除右边距，因为已经是行尾 */
	}

	.containers {
		display: flex;
		/* 使用Flexbox布局 */
		align-items: center;
		/* 垂直居中对齐 */
		justify-content: space-between;
		/* 元素之间的间距平均分布 */
	}

	.image {
		width: 30px;
		/* 图片宽度 */
		height: 30px;
		/* 图片高度 */
	}

	.text {
		margin-right: 450rpx;
		/* 文字与图片之间的间距 */
		font-weight: bold;
		/* 文字加粗 */
	}

	.headers {
		padding: 15px;
		margin-top: 20px;
		border-radius: 9px;
		box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.3);
	}

	.info {
		display: flex;
		flex-wrap: wrap;
		width: 100%;
	}

	.info-item {
		margin-top: 10px;
		width: 33.3%;
		font-size: 13px;
	}

	.gold,
	.silver {
		/* transform: translate(21px, -17px); */
		background: linear-gradient(#fddf89, #fef2ce);
		color: #fbbd08;
		border-radius: 2px;
		text-align: center;
		width: 30px;
		font-size: 12px;
		box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
	}

	.silver {
		background: linear-gradient(#e4e8ea, #e7ebed);
		color: #94a4ad;
	}

	.documents,
	.evaluation {
		border-radius: 9px;
		box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.3);
		margin-top: 20px;
		padding: 15px;
	}

	.book-button-view {
		position: fixed;
		bottom: 9px;
		width: 100%;
		display: flex;
		justify-content: center;
	}

	.book-button-vieww,
	.book-button {
		display: flex;
		justify-content: center;
		align-items: center;
		margin: 0px;
		height: 38px;
		border-radius: 18px;
		width: 80%;
		color: white;
		font-weight: 600;
		background-color: white;
	}

	.book-button {
		width: 100%;
		background: linear-gradient(to right, #9C27B0, #8e27b08c);
	}
</style>